// 动态插入样式
function injectStyles() {
    const styles = `
        
        .particle {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: hsl(0, 100%, 50%);
            pointer-events: none;
        }
    `;
    const styleTag = document.createElement('style');
    styleTag.type = 'text/css';
    styleTag.appendChild(document.createTextNode(styles));
    document.head.appendChild(styleTag);
}

// 调用函数插入样式
injectStyles();

// 获取页面宽度和高度
const width = window.innerWidth;
const height = window.innerHeight;

// 创建一个用于存储粒子的数组
const particles = [];

// 创建一个函数来生成粒子
function createParticle(x, y, dx, dy, color) {
    const particle = document.createElement('div');
    particle.classList.add('particle');
    particle.style.left = `${x}px`;
    particle.style.top = `${y}px`;
    particle.style.backgroundColor = color;
    document.body.appendChild(particle);
    particles.push({ element: particle, x, y, dx, dy, life: 0 });
}

// 更新粒子状态
function updateParticles() {
    for (let i = particles.length - 1; i >= 0; i--) {
        const particle = particles[i];
        particle.x += particle.dx;
        particle.y += particle.dy;
        particle.life++;
        if (particle.life > 30) { // 粒子的生命周期
            document.body.removeChild(particle.element);
            particles.splice(i, 1);
        } else {
            particle.element.style.left = `${particle.x}px`;
            particle.element.style.top = `${particle.y}px`;
        }
    }
}

// 绑定点击事件
document.addEventListener('click', (e) => {
    const x = e.clientX;
    const y = e.clientY;
    const colors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange'];
    for (let i = 0; i < 30; i++) {
        const angle = Math.random() * Math.PI * 2;
        const speed = Math.random() * 5 + 2;
        const dx = Math.cos(angle) * speed;
        const dy = Math.sin(angle) * speed;
        const color = colors[Math.floor(Math.random() * colors.length)];
        createParticle(x, y, dx, dy, color);
    }
});

// 动画循环
function animate() {
    updateParticles();
    requestAnimationFrame(animate);
}
animate();
